<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,700italic,600italic,600,400,700|Lato:700italic,400,400italic,700,900italic,900' rel='stylesheet' type='text/css'>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-family: helvetica, Arial, sans-serif;
            background: #efefef;
            margin: 0;
        }
        #wrapper{
            width: 980px;
            margin: 0 auto 20px;
        }
        header{
            position: relative;
            height: 70px;
            margin: 10px 0;
            background: #fff;
            border-radius: 20px 0 20px 0;
            box-shadow: 0 12px 8px -9px #555;
            padding: 1px;
        }
        header section#title{
            position: absolute;
            width: 300px;
            height: 65px;
            left: 0px;
            top: 0px;
        }

        header h1{
            padding: 9px 12px 0px;
            font-family: 'Lato', helvetica, sans-serif;
            font-weight: 900;
            font-size: 2.0em;
            line-height: 1;
            letter-spacing: -.025em;
            color: #333;
        }
        header h2{
            padding: 0px 12px;
            font-family: "Source Sans Pro", helvetica, sans-serif;
            font-weight: 400;
            font-size: .9em;
            line-height: 1;
            letter-spacing: -0.025em;
            color: #333;
        }


        form.search{
            position: absolute;
            width: 150px;
            top: 23px;
            right: 20px;
        }

        .search input{
            float: right;
            width: 70px;
            padding: 2px 0px 3px 5px;
            border-radius: 10px 0px 10px 0px;
            font-family: "Source Sans Pro", helvetica, sans-serif;
            font-weight: 400;
            font-size: 1em;
            color: #888;
            outline: none;
            transition: 1s width;

        }

        .search input:focus{
            width: 140px;
        }
        .search label{
            display: none;
        }
        form.search input{
            background-color: #ffffff;
        }
        form.search input::-webkit-input-placeholder{
            color: #ccc;
        }




        nav.menu{
            margin: 19px auto;
            padding: 0;
            text-align: center;
            font-size: .8em;
        }

        nav.menu > ul{
            display: inline-block;
        }
        nav.menu li{
            float: left;
            list-style-type: none;
            position: relative;
        }

        nav.menu li a{
            display: block;
            padding: .25em .8em;
            font-family: "Source Sans Pro", helvetica, sans-serif;
            font-style: normal;
            font-weight: 600;
            font-size: 1.2em;
            text-align: left;
            color: #fff;
            text-decoration: none;
            -webkit-font-smoothing: antialiased;
        }

        nav.menu li.choice1 a {
            background:#f58c21;
        }
        nav.menu li.choice2 a {
            background:#4eb8ea;
        }
        nav.menu li.choice3 a {
            background:#d6e636;
        }
        nav.menu li.choice4 a {
            background:#ee4c98;
        }
        nav.menu li.choice5 a {
            background:#f58c21;
        }

        nav.menu li:hover > a{
            color: #555;
            border-color: #fff;
            border: 0;
        }

        nav.menu li:last-child a {
            border-bottom-right-radius: 10px;
        }
        nav.menu li:first-child a{
            border-top-left-radius: 10px;
        }

        nav.menu li ul{
            opacity: 0;
            visibility: hidden;
            width: 12em;
            left: 0;
            top: 100%;
            transition: 1s all;
            position: absolute;
        }

        nav.menu li:hover > ul{
            opacity: 1;
            visibility: visible;
        }
        nav.menu li li {
            float: none;
        }

        section#feature_area{
            overflow: hidden;
            margin: 16px 0 0;
            padding: 0 0 10px;
        }

        section#feature_area article{
            float: left;
            width: 66%;
        }
        section#feature_area aside{
            float: right;
            width: 34%;
        }

        section#feature_area article .inner{
            padding: 12px;
            background: #fff;
            border-radius: 20px 0;
            box-shadow: 0 12px 8px -9px #555;
        }

        section#feature_area article a{
            text-decoration: none;
        }

        section#feature_area article img{
            float: left;
            padding: 0 10px 10px 0;
        }

        section#feature_area article h4{
            font-family: "Source Sans Pro", helvetica, sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 1em;
            color: #f58c21;
            letter-spacing: -0.025em;
        }

        section#feature_area article h3{
            font-family: Lato, helvetica, sans-serif;
            font-style: normal;
            font-weight: 700;
            font-size: 1.75em;
            color: #555;
            margin: 0 0 12px;
            letter-spacing: -.05em;
        }

        section#feature_area article#blog_leadoff p {
            font-family: "Source Sans Pro", helvetica, sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 1.1em;
            line-height: 1.5em;
            color: #616161;
            text-align: justify;
        }


        section#feature_area article#blog_leadoff p::first-line{
            font-variant: small-caps;
            font-size: 1.2em;
        }
        section#feature_area article#blog_leadoff p::first-letter{
            font-family: Lato, helvetica, sans-serif;
            font-style: normal;
            font-weight: 700;
            font-size: 4.5em;
            float: left;
            margin: .05em .05em 0 0;
            line-height: 0.8;
            text-shadow: 1px 3px 3px #ccc;
        }

        form.signin{
            width: 19em;
            float: right;
            background: #fff;
            border-radius: 10px 0 10px 0;
            box-shadow: 0 10px 8px -9px #555;
        }

        .signin fieldset{
            border: 0;
            margin: 10px 14px;
        }

        .signin legend span{
            font-family: Lato, helvetica, sans-serif;
            font-weight: 700;
            font-size: 1.3em;
            line-height: 1.1em;
            color: #4eb8ea;
            letter-spacing: -0.05em;
        }

        .signin section{
            overflow: hidden;
            padding: .25em 0;
        }

        .signin section label{
            font-family: "Source Sans Pro", helvetica, sans-serif;
            font-weight: 400;
            float: left;
            width: 5em;
            margin: .5em .3em 0 0;
            line-height: 1.1;
            color: #555;
        }

        .signin section input{
            float: right;
            width: 10.5em;
            margin: 0.2em 0 0 .5em;
            padding: 3px 10px 2px;
            color: #555;
            font-size: .8em;
            outline: none;
            border-radius: 10px 0 10px 0;
        }

        input:-webkit-autofill { color: #fff !important;}

        .signin section input[type=submit]{
            float: right;
            width: auto;
            margin: 0 2px 3px 0;
            padding: 0 2px 3px 0;
            font-size: 1em;
            font-weight: 800;
            color: #fff;
            border: none;
            background-color: #d6e636;
            box-shadow: 1px 1px 2px #888;
        }

        .signin section p{
            float: right;
            clear: both;
            margin: .2em 0 0;
            text-align: right;
            font-size: .8em;
            line-height: 1;
            color: #555;
        }

        .signin section p a{
            color: #333;
        }
        .signin section p a:hover{
            color: #777;
            text-decoration: none;
        }

        .signin section p.direction.error{
            display: block;
            color: #f00;
        }

        .signin section p.direction{
            display: none;
        }



        section#feature_area nav{
            width: 19em;
            float: right;
            margin: 15px 0 0;
            padding: .6em 0 .75em;
            background-color: #fff;
            border-radius: 10px 0 10px 0;
            box-shadow: 0 12px 8px -9px #555;
        }

        #feature_area nav h3{
            padding: 0 14px 0;
            font-family: Lato, helvetica, sans-serif;
            font-weight: 700;
            font-size: 1.3em;
            text-align: left;
            color: #aaa;
            letter-spacing: -.05em;
        }

        #feature_area nav ul{
            margin: 0 0 0 20px;
        }
        #feature_area nav li{
            padding: .7em 0 0 2em;
            position: relative;
            list-style: none;
        }

        #feature_area nav li:before{
            content: "";
            position: absolute;
            height: 10px;
            width: 10px;
            left: 12px;
            top: 12px;
            border-radius: 5px 0 5px 0;
            background-color: #d6e636;
            box-shadow: 1px 1px 2px #888;
        }

        #feature_area nav li a{
            display: block;
            text-decoration: none;
            font-size: .9em;
            color: #616161;
        }



        section#book_area{
            clear: both;
            border-radius: 20px 0 20px 0;
            border: 1px solid #f58c21;
            margin: 8px 0 16px;
            overflow: hidden;
        }

        #book_area article{
            float: left;
            width: 25%;
            padding: 10px 0;
            background: none;
        }

        #book_area article .inner{
            position: relative;
            width: 140px;
            margin: 0 auto;
        }

        #book_area .inner h3{
            position: absolute;
            width: 160px;
            left: 112%;
            bottom: 5px;
            transform: rotate(-90deg);
            transform-origin: left bottom;
            color: #ccc;
            font-size: 1.4em;
            font-family: Lato, helvetica, sans-serif;
            font-style: normal;
            font-weight: 900;
            text-align: left;
        }

        #book_area article.right:last-child h3{
            left: 85%;
        }

        #book_area article img{
            box-shadow: 0 12px 8px -9px #555;
        }

        #book_area article aside{
            display: none;
            position: absolute;
            z-index: 2;
            width: 200px;
            background: #fff;
            padding: 10px 2px 5px;
            border: 3px solid #f58c21;
            border-radius: 10px 0 10px 0;
            box-shadow: 4px 4px 16px #555;
            color: #555;
            font-family: "Source Sans Pro", helvetica, sans-serif;
            font-size: .8em;
            line-height: 1.5em;
        }

        #book_area article:hover aside{
            display: block;
        }
        #book_area article aside li{
            padding: .25em 0 .75em 1em;
            list-style-type: none;
            line-height: 1.2em;
        }

        #book_area article aside li a{
            text-decoration: none;
            font-size: 1.2em;
            color: #616161;
        }

        #book_area article aside li a:hover{
            color: #333;
        }

        #book_area article.left aside{
            left: 84%;
            top: 14px;
        }

        #book_area article.right aside{
            right: 84%;
            top: 14px;
        }

        #book_area article aside:after{
            content: "";
            position: absolute;
            top: 33px;
            border: 12px solid;
            height: 0px;
            width: 0px;
        }

        #book_area article.left aside:after{
            right: 100%;
            border-color: transparent #f58c21 transparent transparent;
        }
        #book_area article.right aside:after{
            left: 100%;
            border-color: transparent transparent transparent #f58c21;
        }


        footer{
            padding: .5em 0 .35em 0;
            text-align: center;
            border-radius: 10px 0 10px 0;
            background: #fff;
            box-shadow: 0 12px 8px -;
        }

        footer p{
            font-family: "Source Sans Pro";
            font-weight: 400;
            font-size: .85em;
            letter-spacing: -.05em;
            color: #555;
        }

        footer p a{
            font-family: "Source Sans Pro";
            font-style: italic;
            font-weight: 700;
            font-size: 1em;
            color: #4eb8ea;
            text-decoration: none;
        }

        footer p a:hover{
            color: #777;
        }

        footer ul{
            display: inline-block;
            margin: 4px 0 0;

        }

        footer li{
            list-style-type: none;
            float: left;
            font-family: 'Source Sans Pro';
            font-weight: 400;
            font-size: .85em;
        }

        footer li + li a{
            border-left: 1px solid #ccc;
        }

        footer li a{
            text-decoration: none;
            color: #aaa;
            padding: 0 5px;
        }

        footer a:hover{
            color: #777;
        }






    </style>
</head>
<body>
<body ontouchstart="">
<div id="wrapper">
    <header>
        <section id="title">
            <h1>Stylin&#8217; with CSS</h1>
            <h2>The Blog and Books of Charles Wyke-Smith</h2>
        </section>
        <nav class="menu">
            <ul>
                <li class="choice1"><a href="#">Articles</a></li>
                <li class="choice2"><a href="#">Books</a>
                    <ul><!-- drop down menu items -->
                        <li><a href="#">Stylin&#8217; with CSS</a></li>
                        <li><a href="#">Scriptin&#8217; with Ajax</a></li>
                        <li><a href="#">Codin&#8217; for the Web</a></li>
                        <li><a href="#">Visual Stylin' with CSS3</a></li>

                    </ul>
                </li>
                <li class="choice3" ><a href="#">Resources</a>
                    <ul><!-- drop down menu items -->
                        <li><a href="#">Resource 1</a></li>
                        <li><a href="#">Resource 2</a></li>
                        <li><a href="#">Resource 3</a></li>
                    </ul>
                </li>
                <li class="choice4"><a href="#">Bookshelf</a></li>
                <li class="choice5"><a href="#">Contact Me</a></li>

            </ul>
        </nav>
        <form class="search" action="#" method="post">
            <label for="user_name">search</label> <!-- the for attribute ties the label to its control - same as contol's ID -->
            <input type="text" id="user_name" name="user_name" placeholder="search" />
        </form>
    </header>
    <section id="feature_area">
        <article id="blog_leadoff">
            <div class="inner">
                <h4>September 7, 2012</h4>
                <a href="#"><h3>Managing CSS Classes with jQuery</h3></a>
                <img src="images/charles_wyke-smith.jpg" alt="Charles Wyke-Smith photo" />
                <p>Sintus at neque in magna lacinia bibendum sit amet sit amet dolor. Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl sodales tortor ut tortor egestas eu adipiscing enimtincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis sodales tortor ut tortor egestas eu adipiscing enim urna, eu adipi  scing diam pharetra ac.</p>
            </div>
        </article>

        <aside>
            <form  autocomplete="off" class="signin" action="process_form.php" method="post"> <!-- the required form tag -->
                <!--START OF FORM ELEMENTS-->
                <!-- A SINGLE LINE TEXT FIELD -->
                <fieldset> <!-- the container for a group of controls -->
                    <legend><span>Sign In for Code and Updates</span></legend> <!-- the text label for a fieldset -->
                    <section> <!-- control, label and direction wrapper for styling -->
                        <label for="email">Email</label> <!-- the for attribute ties the label to its control - same as contol's ID -->
                        <input type="text" id="email" name="email" />  <!-- the text attribute makes this input display as a text field -->
                    </section>
                    <!-- END SINGLE LINE TEXT FIELD -->
                    <!-- A PASSWORD FIELD -->
                    <section>
                        <label for="password">Password</label>
                        <input type="password" id="password" name="password" maxlength="20" /> <!-- password input text displays as bullets -->
                        <p class="direction">Wrong user name or password</p>
                    </section>
                    <!-- END PASSWORD FIELD -->
                    <!-- SUBMIT BUTTON -->
                    <section> <!-- input must be wrapped in a block level element to validate -->
                        <input type="submit" value="Sign In" />
                        <p class="signup">Not signed up? <a href="#">Register now!</a></p>
                    </section>
                </fieldset>
            </form>
            <nav>
                <h3>Recent Articles</h3>
                <ul>
                    <li><a href="#">Z-index&mdash;Layers of Confusion</a></li>
                    <li><a href="#">Box-Image Techniques</a></li>
                    <li><a href="#">Shadow FX with CSS3</a></li>
                </ul>
            </nav>
        </aside>
    </section>

    <section id="book_area">
        <article class="left">
            <div class="inner">
                <h3>HTML5 + CSS3</h3>
                <img src="images/stylin_cover.png" alt="Stylin' with CSS cover" />
                <aside>
                    <ol>
                        <li><a href="#">Download the Code</a></li>
                        <li><a href="#">Table of Contents</a></li>
                        <li><a href="#">Buy this Book</a></li>
                    </ol>
                </aside>
            </div>
        </article>

        <article class="left">
            <div class="inner">
                <h3>JavaScript</h3>
                <img src="images/scriptin_cover.png" alt="Scriptin' with Ajax cover" />
                <aside>
                    <ol>
                        <li><a href="#">Download the Code</a></li>
                        <li><a href="#">Table of Contents</a></li>
                        <li><a href="#">Buy this Book</a></li>
                    </ol>
                </aside>
            </div>
        </article>

        <article class="right">
            <div class="inner">
                <h3>PHP + SQL</h3>
                <span><img src="images/codin_cover.png" alt="Codin' for the Web cover" /></span>
                <aside>
                    <ol>
                        <li><a href="#">Download the Code</a></li>
                        <li><a href="#">Table of Contents</a></li>
                        <li><a href="#">Buy this Book</a></li>
                    </ol>
                </aside>
            </div>
        </article>
        <article class="right">
            <div class="inner">
                <h3>Presentation</h3>
                <img src="images/visual_stylin_cover.png" alt="Visual Stylin' cover" />
                <aside>
                    <ol>
                        <li><a href="#">Download the Code</a></li>
                        <li><a href="#">Table of Contents</a></li>
                        <li><a href="#">Buy this Book</a></li>
                    </ol>
                </aside>
            </div>
        </article>

    </section><!--end section '.feature'-->
    <footer>
        <p>A CSS template from <a href="http://www.stylinwithcss.com"><em>Stylin'
            with CSS, Third Edition</em></a> by Charles Wyke-Smith</p>
        <nav>
            <ul>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Contact Charles</a></li>
            </ul>
        </nav>
    </footer>
</div>
</body>
</html>